<template>
  <div class="login-container">
    <div class="login-header">
      <h1>智慧医院便民平台</h1>
      <p>开启智慧医疗新时代</p>
    </div>
    
    <div class="login-tabs">
      <span :class="{ active: activeTab === 'sms' }" @click="activeTab = 'sms'">验证码登录</span>
      <span :class="{ active: activeTab === 'pwd' }" @click="activeTab = 'pwd'">密码登录</span>
    </div>
    
    <div class="login-form">
      <van-field
        v-model="phone"
        label="账号"
        placeholder="请输入您的手机号码"
        type="tel"
        maxlength="11"
      />
      
      <div v-if="activeTab === 'sms'" class="sms-code-container">
        <van-field
          v-model="smsCode"
          label="验证码"
          placeholder="请输入手机验证码"
          type="number"
          maxlength="6"
        />
        <van-button 
          size="small" 
          type="primary" 
          class="get-code-btn"
          :disabled="countdown > 0"
          @click="getSmsCode"
        >
          {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
        </van-button>
      </div>
      
      <van-field
        v-if="activeTab === 'pwd'"
        v-model="password"
        label="密码"
        placeholder="请输入密码"
        :type="showPassword ? 'text' : 'password'"
      >
        <template #right-icon>
          <van-icon :name="showPassword ? 'eye-o' : 'closed-eye-o'" @click="showPassword = !showPassword" />
        </template>
      </van-field>
      
      <van-button type="primary" class="login-btn" @click="login">登录</van-button>
      
      <div v-if="activeTab === 'sms'" class="login-tip">
        验证码登录可一键注册或登录
      </div>
      
      <van-button type="default" class="wechat-login-btn" @click="wechatLogin">
        <van-icon name="wechat" class="wechat-icon" /> 微信一键登录注册
      </van-button>
    </div>
    
    <div class="agreement-container">
      <van-checkbox v-model="agreed">
        我已阅读并同意 <span class="link">隐私政策</span>、<span class="link">用户协议</span> 和 <span class="link">平台协议</span>
      </van-checkbox>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showNotify } from 'vant'

const router = useRouter()
const activeTab = ref<'sms' | 'pwd'>('sms')
const phone = ref('')
const smsCode = ref('')
const password = ref('')
const showPassword = ref(false)
const agreed = ref(true)
const countdown = ref(0)

// 模拟获取验证码
const getSmsCode = () => {
  if (!phone.value || phone.value.length !== 11) {
    showToast('请输入正确的手机号码')
    return
  }
  
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  showNotify('验证码已发送')
}

// 登录功能
const login = () => {
  if (!agreed.value) {
    showToast('请阅读并同意协议')
    return
  }
  
  if (!phone.value) {
    showToast('请输入手机号码')
    return
  }
  
  // 模拟登录验证
  if (activeTab.value === 'sms') {
    if (!smsCode.value) {
      showToast('请输入验证码')
      return
    }
    // 模拟验证码登录（这里使用模拟逻辑）
    if (smsCode.value === '123456') {
      showNotify('登录成功')
      router.push('/home')
    } else {
      showToast('验证码错误')
    }
  } else {
    if (!password.value) {
      showToast('请输入密码')
      return
    }
    // 使用赋死值的方式登录
    if (phone.value === 'admin' && password.value === 'admin') {
      showNotify('登录成功')
      router.push('/home')
    } else {
      showToast('账号或密码错误')
    }
  }
}

// 微信登录
const wechatLogin = () => {
  if (!agreed.value) {
    showToast('请阅读并同意协议')
    return
  }
  showToast('微信登录功能开发中')
}
</script>

<style scoped>
.login-container {
  padding: 40px 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-header h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.login-header p {
  color: #666;
  font-size: 14px;
}

.login-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
}

.login-tabs span {
  padding: 10px 30px;
  font-size: 16px;
  cursor: pointer;
  color: #666;
}

.login-tabs span.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.login-form {
  margin-bottom: 30px;
}

.sms-code-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.sms-code-container :deep(.van-field) {
  flex: 1;
}

.get-code-btn {
  white-space: nowrap;
}

.login-btn {
  margin-top: 20px;
}

.login-tip {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin: 15px 0;
}

.wechat-login-btn {
  margin-top: 20px;
}

.wechat-icon {
  margin-right: 5px;
  color: #07c160;
}

.agreement-container {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  padding: 0 20px;
}

.agreement-container :deep(.van-checkbox__label) {
  font-size: 12px;
  color: #999;
}

.link {
  color: #007aff;
}
</style>